<template>
    <el-drawer v-model="drawer2" :size="700">
        <template #header>
            <h4>推荐产品</h4>
        </template>
        <template #default v-loading="loading">
            <el-table :data="data" style="width: 100%">
                <el-table-column prop="id" label="id" width="180" />
                <el-table-column prop="cover" label="图片" width="180">
                    <template #default="{ row }">
                        <el-image style="width: 100px; height: 100px" :src="row.cover" fit="fill" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" />
                <el-table-column prop="address" label="操作">
                    <template #default="{ row }">
                        <el-popconfirm title="Are you sure to delete this?" @confirm="removeHandler(row.id)">
                            <template #reference>
                                <el-button text type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="submitHandler">商品关联</el-button>
                <el-button type="primary" @click="closeDrawer">取消</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'

const drawer2 = ref(false)


const openDrawer = () => drawer2.value = true
const closeDrawer = () => drawer2.value = false

const emit = defineEmits(['submit', 'removeHandler'])

const submitHandler = () => {
    emit('submit')
}

// 删除商品
const removeHandler = (id: number) => {
    emit('removeHandler', id)
}
const data1 = defineProps({
    data: Object,
    loading: Boolean
})


defineExpose({
    openDrawer,
    closeDrawer
})


</script>
<style scoped lang='scss'></style>